<extend name="Common/base"/>
<block name="title">关于我们</block>
<block name="css">
    <link rel="stylesheet" href="__PUBLIC__/Home/styles/aboutus.css">
    <!--<link rel="stylesheet" href="__PUBLIC__/Home/styles/styles.css">-->
    <link rel="stylesheet" href="__PUBLIC__/Home/styles/fancyInput.css">
    <style>
        .fancyInput input, .fancyInput textarea {width: auto;}
        .fancyInput textarea , .fancyInput.textarea {overflow: hidden!important;}
        .fancyInput.textarea > div {letter-spacing: 3px;font-size: 1.9rem; text-align: justify}
        .content-left , .content-right {opacity: 0}
    </style>
</block>

<block name="content">
    <div class="section" style="display: flex;justify-content: center;align-items: center;"  name="content" id="content" >
    <div class="row about-us">
        <div class="col-md-push-3 col-md-2 logo_about">
            <img src="__PUBLIC__/Home/images/logo_about.png" width="100%" style="opacity: 0" alt="">
        </div>
        <div class="col-md-push-4 col-md-5 about_content">
            <section class='input'>
                    <textarea style="OVERFLOW:   visible" class="t" ></textarea>
            </section>
            <section class='input'>
                <textarea style="OVERFLOW:   visible" class="t" ></textarea>
            </section>
            <section class='input'>
                <textarea style="OVERFLOW:   visible" class="t" ></textarea>
            </section>
        </div>
    </div>
    </div>
</block>

<block name="footer_content">
    <div class="row">
        <div class="header-title">
            <h2 class="cn-title">联系我们</h2>
            <h3 class="en-title">CONTACT US</h3>
        </div>
        <div class="col-md-10 col-md-push-1" style="padding: 3rem">
            <div class="col-md-6 content-left">
                地址：广州市番禺区市桥平康路189号四楼
            </div>
            <div class="col-md-6 content-right">
                电话：020-85821996
            </div>
        </div>
    </div>
    <div class="row">
        <div class="header-title">
            <h2 class="cn-title">交通路线</h2>
            <h3 class="en-title">BUS LINE</h3>
        </div>
        <div class="col-md-10 col-md-push-1" style="padding: 3rem">
            <div class="col-md-6 content-left">
               <p style="width: 90%">方案一：乘地铁到番禺广场 D出口，走路约15
                   分钟到公司门口（沙墟市场对面）</p>
                <p style="width: 90%">方案二：乘（番3、10、22、51B、92、92B、
                    97、100、148、149、150、150B； 南沙65、
                    68；303路，310路）公交车到 沙墟市场公交站</p>
            </div>
            <div class="col-md-6 content-right">
                <iframe src="__PUBLIC__/Home/map.html" frameborder="0" style="width: 100%;height: 100%;"></iframe>
            </div>
        </div>
    </div>
</block>

<block name="js">
    <script src='__PUBLIC__/Home/scripts/fancyInput.js'></script>
<script>
    $(function(){
        $('.container').fullpage({
            afterLoad:function(link, index){
                if (index == 2) {
                    $('.dot').each(function (index) {
                        $(this).transition({ rotate: 420*(index+1)+'deg' , opacity: 1} , 2500 );
                    })
                }
                $('.section').eq(index-1).find('.header-title').css('opacity',1).addClass('animated bounceInUp');
                $('.section').eq(index-1).find('.content-left').css('opacity',1).addClass('animated fadeInLeft');
                $('.section').eq(index-1).find('.content-right').css('opacity',1).addClass('animated fadeInRight');
            },
            verticalCentered : false,
            resize : true,
            anchors:['head' ,'a','content', 'foot']
        });

    });

    $('section :input').val('').fancyInput()[0].focus();

    // Everything below is only for the DEMO
    function init(str){
        var input = $('section textarea').val('')[0],
            s = 'IT高新技术培训，互联网技术培训'.split('').reverse(),
            len = s.length-1,
            e = $.Event('keypress');

        input.nextElementSibling.className = '';

        var	initInterval = setInterval(function(){
            if( s.length ){
                var c = s.pop();
                fancyInput.writer(c, input, len-s.length).setCaret(input);
                input.value += c;
            }
            else {
                clearInterval(initInterval);
                $('section :input').eq(1).val('').fancyInput()[0].focus();

                var input1 = $('section textarea').eq(1).val('')[0],
                    s1 = 'UI设计,VI画册,支持个性化定制,LOGO设计,APP开发,小程序,分销系统,人力资源服务,团队外包及IT人才培养的公司。'.split('').reverse(),
                    len1 = s1.length-1,
                    e1 = $.Event('keypress');

                input1.nextElementSibling.className = '';

                var	initInterval1 = setInterval(function(){
                    if( s1.length ){
                        var c1= s1.pop();
                        fancyInput.writer(c1, input1, len1-s1.length).setCaret(input1);
                        input1.value += c;
                    }
                    else {
                        clearInterval(initInterval1);
                        $('section :input').eq(2).val('').fancyInput()[0].focus();

                        var input2 = $('section textarea').eq(2).val('')[0],
                            s2 = '为每一个不平凡的梦想助力，从薪出发！ '.split('').reverse(),
                            len2 = s2.length-1,
                            e2 = $.Event('keypress');

                        input2.nextElementSibling.className = '';

                        var	initInterval2 = setInterval(function(){
                            if( s2.length ){
                                var c2= s2.pop();
                                fancyInput.writer(c2, input2, len2-s2.length).setCaret(input2);
                                input2.value += c;
                            }
                            else {
                                clearInterval(initInterval2);
                                $('section :input').eq(2).val('').fancyInput()[0].focus();
                                $('.logo_about img').css('opacity' , '1').addClass('animated rollIn')

                            }
                        },70);

                    }
                },70);



            }
        },70);
    }

    init();
</script>
</block>